<script setup>
import { Link, usePage } from '@inertiajs/vue3'
import { computed } from 'vue';
import { PencilIcon } from '@heroicons/vue/20/solid';

const props = defineProps({
    user: Object
});

const page = usePage();
const isLoggedIn = computed(() => !!props.user);

const navItems = [
    { name: '首页', href: route('blog.home') },
    { name: '归档', href: route('blog.archive') },
    { name: '关于', href: route('blog.about') }
];

const authItems = [
    { name: '写文章', href: route('author.posts.create'), requiresAuth: true, icon: 'edit' }
];

// 筛选出需要显示的认证项
const filteredAuthItems = computed(() => {
    return authItems.filter(item => {
        // 如果项目不需要认证或用户已登录，则显示
        return !item?.requiresAuth || isLoggedIn.value;
    });
});
</script>

<template>
    <nav class="flex items-center space-x-4">
        <!-- 公共导航项 -->
        <Link 
            v-for="item in navItems" 
            :key="item.name"
            :href="item.href"
            class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
            :class="{ 'bg-gray-100': $page.url.startsWith(item.href) }"
        >
            {{ item.name }}
        </Link>

        <!-- 需要登录的导航项 -->
        <Link 
            v-for="item in filteredAuthItems" 
            :key="item.name"
            :href="item.href"
            class="flex items-center text-orange-600 bg-orange-50 px-3 py-2 rounded-md text-sm font-medium transition-colors hover:bg-orange-100 hover:text-orange-800"
            :class="{ 'bg-orange-100': $page.url.startsWith(item.href) }"
        >
            <!-- 编辑图标 -->
            <PencilIcon v-if="item && item.icon === 'edit'" class="h-4 w-4 mr-1" />
            {{ item.name }}
        </Link>
    </nav>
</template> 